import React, { memo, useEffect, useState } from "react";
import type { FC, ReactNode } from "react";
import { HeaderWrapper } from "./style";
import HeaderTitles from "@/assets/data/header-titles.json"
import { Header } from "antd/es/layout/layout";
import { Menu } from "antd";
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";


interface IProps {
    children?: ReactNode
}

interface ITitleItem {
    title: string,
    type: string,
    link: string
}

interface MenuInfo {
    key: string;
    keyPath: string[];
    /** @deprecated This will not support in future. You should avoid to use this */
    item: React.ReactInstance;
    domEvent: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
}


const items = HeaderTitles.map((value: ITitleItem, index: number) => ({
    key: String(index + 1),
    label: value.title,
    title: value.title
}));

const titles = HeaderTitles.map((value: ITitleItem, index: number) => ({
    key: String(index + 1),
    title: value.title,
    type: value.type,
    link: value.link
}));

const AppHeader: FC<IProps> = () => {


    const navigate = useNavigate()
    const location = useLocation()

    const linkTo = ({ key }: MenuInfo) => {
        const titleItem = titles.filter((item) => item.key == key)[0]
        if (titleItem.type == "path") {
            navigate(titleItem.link)
        } else {
            window.open(titleItem.link, '_blank');
        }
    }

    return (
        <HeaderWrapper >
            <div className="content">
                <Header
                    style={{
                        position: 'sticky',
                        top: 0,
                        zIndex: 1,
                        width: '100%',
                        display: 'flex',
                        alignItems: 'center',
                    }}
                >
                    <div className="demo-logo" />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['1']}
                        items={items}
                        style={{ flex: 1, minWidth: 0 }}
                        onClick={linkTo}
                    />
                </Header>
            </div>
        </HeaderWrapper>
    )
}

export default memo(AppHeader)